<script setup lang="ts">
import { showToast } from 'vant'
import { ref } from 'vue'
import { answerQuestionApi } from '@/apis/user'
import { useRouter } from 'vue-router'

const router = useRouter()

let q1 = ref('')
let q2 = ref('')
let q3 = ref('')

// 提交问卷
const submitAnswer = async () => {
  if (q1.value === '' || q2.value === '' || q3.value === '') {
    return showToast('请填写完整问卷')
  }
  const res = await answerQuestionApi({ q: `${q1.value}_${q2.value}_${q3.value}` })
  if (res.data.code !== 200) {
    return showToast(res.data.msg)
  }
  // 跳转到兑换页面
  router.replace('/exchange')
}
</script>
<template>
  <div class="questions box bg clmstart">
    <img src="@/assets/img/slogan.png" class="logo" />
    <img src="@/assets/img/home.png" class="home btnani" @click="$router.replace('/map')" />
    <p class="qtitle">
      领取礼品前，先完成<br />
      一份问卷调查吧！
    </p>
    <div class="quesinfobox">
      <div class="qitem">
        <p class="title"><span>1. </span><span>您所属行业？</span></p>
        <div class="answerbox">
          <van-radio-group icon-size="14px" checked-color="#1d139b" v-model="q1">
            <van-radio name="1">消费者</van-radio>
            <van-radio name="2">媒体代表</van-radio>
            <van-radio name="3">经销商/渠道商</van-radio>
            <van-radio name="4">行业代表</van-radio>
          </van-radio-group>
          <!-- <input type="text" class="otherinput" v-model="q1other" v-show="q1 == '5'" /> -->
        </div>
      </div>
      <div class="qitem">
        <p class="title">
          <span>2. </span><span>您认为我公司本次展示很好的体现了产品的特点和品牌形象吗？</span>
        </p>
        <div class="answerbox">
          <van-radio-group icon-size="14px" checked-color="#1d139b" v-model="q2">
            <van-radio name="1">很好</van-radio>
            <van-radio name="2">较好</van-radio>
            <van-radio name="3">一般</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="qitem">
        <p class="title"><span>3. </span><span>我公司本次展示产品对您具有吸引力吗？</span></p>
        <div class="answerbox">
          <van-radio-group icon-size="14px" checked-color="#1d139b" v-model="q3">
            <van-radio name="1">很有吸引力</van-radio>
            <van-radio name="2">较有吸引力</van-radio>
            <van-radio name="3">一般</van-radio>
          </van-radio-group>
        </div>
      </div>
    </div>
    <img src="@/assets/img/btn_submit.png" class="btn btn_submit btnani" @click="submitAnswer" />
  </div>
</template>
<style>
.van-radio,
.van-checkbox {
  margin-bottom: 30px !important;
}
.van-radio__label,
.van-checkbox__label {
  color: #ffffff !important;
  line-height: 1 !important;
  margin-left: 12px !important;
}
</style>
<style lang="scss" scoped>
.logo {
  width: 230px;
  margin-top: 70px;
}
.questions {
  font-size: 33px;
  overflow: hidden scroll;
  .home {
    position: absolute;
    top: 40px;
    left: 50px;
    width: 55px;
  }
  .qtitle {
    margin-top: 55px;
    font-size: 54px;
  }
  .quesinfobox {
    width: 85%;
    margin-top: 100px;
    .qitem {
      margin-bottom: 60px;
      .title {
        margin-bottom: 30px;
        display: flex;
        span:last-child {
          margin-left: 10px;
        }
      }
      .answerbox {
        margin-left: 30px;
        .otherinput {
          width: 400px;
          height: 60px;
          font-size: 30px;
          background: none;
          border: 1px solid #ffffff;
          border-radius: 6px;
          margin-left: 40px;
          text-indent: 15px;
        }
      }
    }
  }
  .btn_submit {
    margin-top: 50px;
    margin-bottom: 100px;
  }
}
</style>
